<template>
  <div v-loading="loading">
    <nav>
      <div class="nav-left">
        <span><strong>{{ project.name }}</strong></span>
      </div>
      <div class="nav-right" @click="enterManagePage">
        <el-icon class="setting-icon" size="20px" v-if="IsProjectMember">
          <Edit />
        </el-icon>
      </div>
    </nav>
    <div class="projectView">
      <section class="left-side">
        <!-- 项目简介 -->
        <div class="introduction">
          <el-descriptions class="descriptions-list" size="large" border>
            <template #title>
              <div class="descriptions-title">
                <el-icon class="descriptions-title-icon">
                  <Cpu />
                </el-icon>
                <span>简介</span>
              </div>
            </template>
          </el-descriptions>
          <div v-html="projectDetail" class="project-introduction"></div>
        </div>
        <!-- 项目文档 -->
        <div class="info-container">
          <el-descriptions class="descriptions-list" size="large" border>
            <template #title>
              <div class="descriptions-title">
                <el-icon class="descriptions-title-icon">
                  <Document />
                </el-icon>
                <span>文档</span>
              </div>
            </template>
          </el-descriptions>
          <el-table :data="documentList" border>
            <el-table-column prop="name" label="名字">
              <template v-slot="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="href" label="链接">
              <template v-slot="scope">
                <el-link type="primary" :href="scope.row.href" target="_blank" :underline="false">{{ scope.row.href
                }}</el-link>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <!-- 代码仓库 -->
        <div class="info-container">
          <el-descriptions class="descriptions-list" size="large" border>
            <template #title>
              <div class="descriptions-title">
                <el-icon class="descriptions-title-icon">
                  <Box />
                </el-icon>
                <span>代码仓库</span>
              </div>
            </template>
          </el-descriptions>
          <el-table :data="repositoryList" border>
            <el-table-column prop="name" label="名字">
              <template v-slot="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="href" label="链接">
              <template v-slot="scope">
                <el-link type="primary" :href="scope.row.href" target="_blank" :underline="false">{{ scope.row.href
                }}</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <section class="right-side">
        <div class="project-detail">
          <!-- 技术区域 -->
          <div class="project-detail-tec">
            <div class="header">
              <h4>技术栈</h4>
            </div>
            <div class="content">
              <router-link :to="`/technologies/${item.id}`" v-for="item in project.technologies" :key="item.id">
                <el-tag type="success">{{ item.name }}</el-tag>
              </router-link>
              <!-- <el-tag type="success" v-for="item in project.technologies" :key="item.id">{{ item.name }}</el-tag> -->
            </div>
          </div>
          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <!-- 版本区域 -->
          <div class="project-detail-version">
            <div class="header">
              <h4>版本</h4>
            </div>
            <div class="content">
              <el-tag size="small" v-if="project.current_version">{{ project.current_version }}</el-tag>
              <span class="text-muted" v-else>暂无发行版本</span>
            </div>
          </div>
          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <!-- 成员区域 -->
          <div class="project-detail-member">
            <div class="header">
              <h4>成员<span class="text-muted">&nbsp;({{ project.members.length }})</span></h4>
            </div>
            <div class="content">
              <Capsule v-for="item in project.members" :key="item.id">{{ item.name }}</Capsule>
            </div>
          </div>
          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
        </div>
      </section>
    </div>
  </div>
  <!-- <Loading :isLoading="loading" /> -->
</template>

<script>
import { post } from '../../../utils/common/api'
import MarkdownIt from 'markdown-it'
export default {
  data() {
    return {
      id: this.$route.params.id,
      project: {
        id: undefined,
        name: '',
        leader: {
          name: '',
          id: undefined
        },
        current_version: '',
        detail: '',
        start_time: {
          year: 2003,
          month: 8,
          day: 22
        },
        top_designer: {
          called: '总设计师',
          user: {
            name: '',
            id: undefined
          }
        },
        members: [
        ],
        technologies: [
        ]
      },
      documentList: [],
      repositoryList: [],
      loading: false,
    }
  },
  computed: {
    projectDetail() {
      const md = new MarkdownIt()
      const result = md.render(this.project.detail)
      return result
    },
    IsProjectMember() {
      const members = this.project.members
      return members.map(item => item.id).includes(+this.usePermission.id)
    },
  },
  methods: {
    async updateProject() {
      const res = await post('/project/profile', { id: this.id })
      this.project = res
      document.title = res.name
    },

    async updateDocument() {
      const res = await post('/project/document/list', {
        pid: this.id
      })
      this.documentList = res.list
    },

    async updateRepositary() {
      const res = await post('/project/repository/list', { pid: this.id });
      this.repositoryList = res.list;
    },

    async loadData() {
      this.loading = true
      await Promise.all([this.updateProject(),this.updateDocument(),this.updateRepositary()])
      this.loading = false;
    },

    enterManagePage() {
      this.$router.push({
        path: `/projects/edit/${this.id}`
      })
    }
  },
  mounted() {
    this.loadData()
  },
}
</script>

<style scoped>
nav {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-left {
  position: relative;
  margin-left: 30px;
}

.nav-left::before {
  content: '';
  font-family: 'icomoon' !important;
  font-size: 18px;
  position: absolute;
  left: -22px;
  top: -1px;
}

.nav-right {
  margin-right: 20px;
  cursor: pointer;
  color: rgb(252, 85, 49);
}


.projectView {
  display: grid;
  grid-template-columns: 75% 25%;
  padding: 10px;
  text-align: left;
}

.left-side,
.right-side {
  padding: 10px;
}

.introduction {
  width: 75%;
  margin: 0 auto;
}

.project-introduction {
  padding: 24px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  text-align: left;
  font-size: 15px;
  box-sizing: border-box;
}

.info-container {
  width: 75%;
  margin: 0 auto;
  margin-top: 10px;
}

.descriptions-title {
  display: flex;
  align-items: center;
}

.descriptions-title-icon {
  margin-right: 7px;
}

.right-side .header {
  margin-bottom: 16px;
}

.right-side .header h4 {
  display: inline-block;
  margin: 0;
  font-size: 16px;
}

.project-detail-version {
  margin-bottom: 10px;
}

.project-detail-member .content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}


.right-side .text-muted {
  font-size: 14px;
  color: #8c92a4;
}

.el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.project-detail-tec .text-muted {
  display: flex;
  align-items: center;
}

.project-detail-tec .text-muted:hover {
  cursor: pointer;
  color: #aeb2bf;
}
</style>